<template>
	<view>
		<!-- 个人信息 -->
		<view class="user">
			<ppc-card v-if="token&&baseFormData" :title="baseFormData.nickName" @setData="setData"
				@click="handleClick(baseFormData)" :margin="'20rpx'" :padding="'40rpx'"
				:sub-title="baseFormData.signature" @extraClick="handleClick(baseFormData)" extra="个人主页"
				:icon="baseFormData.avatarUrl" :type="1" :isLogin='token'>
			</ppc-card>
			<ppc-card v-else title="登录查看" :margin="'20rpx'" :padding="'40rpx'" sub-title="暂未登录"
				:icon="'/static/icon/avatar.png'" :type="1" :isLogin='token' @click="login">
			</ppc-card>
		</view>
		<!-- 广告预留位 -->
		<view class="advertisement">
			<uni-notice-bar show-icon scrollable color="#87C38F" background-color="#FFF"
				text="目前为内测版本,有任何建议可以直接联系我哦～" />
		</view>
		<!-- <view class="advertisement">
				<ppc-card title="开通会员加速瘦身" @click="handleClick" :margin="'50rpx 20rpx'" :padding="'20rpx'" :isBtn='true'
					:BtnBg="'#F9D797'" :titleColor="'#F2C890'" :isSmall="true" :back-ground="'#3E3B4E'"
					:subTitleColor="'#9B781E'" :sub-title="advertisementLable" extra="立即开通" :icon="advertisement">
				</ppc-card>
			</view> -->

		<!-- 功能栏 -->
		<view>
			<ppc-section :title="'常用功能'"></ppc-section>
			<view class="toolCard">
				<view class="tools" @click="navigateToTool(item.text)" v-for="(item,index) in tools" :key="index">
					<image class="icon" :src="item.icon" mode="aspectFit"></image>
					<text class="text">{{item.text}}</text>
				</view>
			</view>
		</view>

		<!-- 其他 -->
		<view>
			<ppc-section :title="'其他'"></ppc-section>
			<view class="other">
				<view class="others" v-for="(item,index) in other" :key="index" @click="setting(item)">
					<view class="others_item">
						<image class="icon" :src="item.icon" mode="aspectFit"></image>
						<text class="text">{{item.text}}</text>
					</view>
					<view class="line" v-if="index!=2">

					</view>
				</view>
			</view>
		</view>
		<!-- 身高，体重，年龄，性别修改 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="btn">
				<text @click="()=>popup.close()" class="cancel">取消</text>
				<text @click="saveData" class="save">确定</text>
			</view>
			<picker-view :value="pickerData" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in number" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in float" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in unit" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>
		<!-- 基础代谢修改 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="基础代谢" :value="userInfo.metabolize"
				placeholder="请输入基础代谢" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<ppc-loading v-if="loading"></ppc-loading>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
	} from 'vue'
	import {
		onShow,
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import ppcCard from '/components/ppcCard.vue'
	import ppcSection from '/components/ppcSection.vue'
	import ppcLoading from '/components/ppcLoading.vue'
	const advertisement = ref("/static/icon/VIP.png")
	const advertisementLable = ref("享受会员权益")
	const {
		proxy
	} = getCurrentInstance()
	const userInfo = ref(uni.getStorageSync('userInfo'))
	const unit = ref(['公斤'])
	const float = ref([])
	const number = ref([])
	const popup = ref()
	const inputDialog = ref()
	const tempData = ref()
	//修改的类型
	const type = ref()
	//滚动选择器数据
	const pickerData = ref([])
	// 个人基础信息
	const baseFormData = ref()
	//是否登录
	const token = ref(uni.getStorageSync('Token'))
	//加载
	const loading = ref(false)
	// 功能栏
	const tools = ref([
		// 	{
		// 	text: '基本信息',
		// 	icon: '/static/icon/dataSource.png'
		// }, 
		{
			text: '上传食物',
			icon: '/static/icon/export.png'
		}, {
			text: '计算代谢',
			icon: '/static/icon/count.png'
		}, {
			text: '营养搭配',
			icon: '/static/icon/foods.png'
		}
	])
	// 基础设置栏
	const other = ref([
		// 	{
		// 	text: "商务合作",
		// 	icon: "/static/icon/cooperate.png"
		// }, 
		{
			text: "设置",
			icon: "/static/icon/setting.png"
		},
		// {
		// 	text: "兑换会员",
		// 	icon: "/static/icon/exchange.png"
		// },
	])
	// onShow(() => {

	// })
	onLoad(() => {
		if (token.value && !userInfo.value) {
			getUserData()
		} else {
			baseFormData.value = userInfo.value
		}
		uni.$on('login', () => {
			getUserData()
		})
		for (let i = 30; i <= 200; i++) {
			number.value.push(i)
		}
		for (let i = 0; i <= 9; i++) {
			float.value.push('.' + i)
		}
	})
	onUnload(() => {
		uni.$off('login')
	})
	//获取个人信息
	const getUserData = () => {
		token.value = uni.getStorageSync('Token')
		loading.value = true
		proxy.$http('getUserInfo').then(res => {
			if (!res.errCode) {
				loading.value = false
				baseFormData.value = res.result.data.data[0]
				uni.setStorageSync("userInfo",
					baseFormData.value
				)
			}
		})
	}
	const handleClick = (e) => {
		if (e) {
			uni.navigateTo({
				url: `/pages/information/information?baseFormData=${JSON.stringify(e)}`
			})
		} else {

		}
	}
	//修改信息
	const setData = (e) => {
		if (e == '当前(公斤)') {
			if (baseFormData.value.weight) {
				let v1 = Number(baseFormData.value.weight.toString().split('.')[0])
				let v2 = Number(baseFormData.value.weight.toString().split('.')[1]) ? Number(baseFormData.value
					.weight
					.toString().split('.')[1]) : 0
				pickerData.value = [getIndexByValue(v1, 30, 200), v2, 0]
			}
			type.value = 'weight'
			popup.value.open("bottom")
		} else if (e == '目标(公斤)') {
			if (baseFormData.value.targetWeight) {
				let v1 = Number(baseFormData.value.targetWeight.toString().split('.')[0])
				let v2 = Number(baseFormData.value.targetWeight.toString().split('.')[1]) ? Number(baseFormData.value
					.targetWeight
					.toString().split('.')[1]) : 0
				pickerData.value = [getIndexByValue(v1, 30, 200), v2, 0]

			}
			type.value = 'targetWeight'
			popup.value.open("bottom")
		} else {
			type.value = 'metabolize'
			inputDialog.value.open()
		}
	}
	//
	const setting = (item) => {
		if (!token.value) {
			uni.showToast({
				title: '请先登录哦',
				icon: 'error',
				duration: 1000
			})
			return
		}
		if (item.text == '设置') {
			uni.navigateTo({
				url: '/pages/setting/setting'
			})
		}
		// uni.showToast({
		// 	title: "暂未开放！",
		// 	icon: 'error',
		// 	duration: 1000
		// })
	}
	const bindChange = (e) => {
		tempData.value = Number(number.value[e.detail.value[0]] + float.value[e.detail.value[1]])
	}
	//根据数值找到对应的索引
	const getIndexByValue = (value, min, max) => {
		if (value > max || value < min) return false
		return value - min
	}
	// 工具栏跳转
	const navigateToTool = (e) => {
		if (!token.value) {
			uni.showToast({
				title: '请先登录哦',
				icon: 'error',
				duration: 1000
			})
			return
		}
		switch (e) {
			case "计算代谢":
				uni.navigateTo({
					url: "/pages/calculate/calculate"
				})
				break;
			case "上传食物":
				uni.navigateTo({
					url: "/pages/custom/custom"
				})
				break;
			case "基本信息":
				uni.navigateTo({
					url: "/pages/information/information"
				})
				break;
			case "营养搭配":
				uni.navigateTo({
					url: "/pages/nutrition/nutrition"
				})
				break;

			default:
				break;
		}
	}
	const saveData = () => {
		uni.showLoading({
			title: '保存中...'
		})
		if (type.value == 'weight') {
			proxy.$http("setUserInfo", {
				weight: tempData.value
			}).then(res => {
				uni.showToast({
					title: res.result.msg,
					icon: 'none',
					duration: 1000
				})
				userInfo.value.weight = tempData.value
				uni.$emit('information', {
					type: 'weight',
					value: tempData.value
				})
				uni.setStorageSync('userInfo', userInfo.value)
				uni.hideLoading()
				popup.value.close()
			})
		} else if (type.value == 'targetWeight') {
			proxy.$http("setUserInfo", {
				targetWeight: tempData.value
			}).then(res => {
				uni.showToast({
					title: res.result.msg,
					icon: 'none',
					duration: 1000
				})
				userInfo.value.targetWeight = tempData.value
				uni.$emit('information', {
					type: 'targetWeight',
					value: tempData.value
				})
				uni.setStorageSync('userInfo', userInfo.value)
				uni.hideLoading()
				popup.value.close()
			})
		}
	}
	//修改基础代谢
	const dialogInputConfirm = (val) => {
		if (val.length > 10) {
			uni.showToast({
				title: '超出10个字符',
				icon: 'error',
				duration: 1000
			})
			return
		}
		uni.showLoading({
			title: '保存中...'
		})
		proxy.$http("setUserInfo", {
			metabolize: val
		}).then(res => {
			if (!res.errCode) {
				uni.showToast({
					title: res.result.msg,
					icon: 'none',
					duration: 1000
				})
				uni.$emit('information', {
					type: 'metabolize',
					value: val
				})
				userInfo.value.metabolize = val
				uni.setStorageSync('userInfo', userInfo.value)
				uni.hideLoading()
				inputDialog.value.close()
			}
		})
	}
	//登录
	const login = () => {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}
</script>

<style lang="scss">
	.toolCard {
		display: flex;
		justify-content: space-around;
		background: #fff;
		margin: 20rpx;
		padding: 40rpx 0rpx;
		border-radius: 30rpx;

		.tools {
			display: flex;
			align-items: center;
			flex-direction: column;

			.icon {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 10rpx;
			}

			.text {
				font-size: 26rpx;
				margin-top: 10rpx;
				font-weight: bold;
			}
		}

	}

	.advertisement {
		padding: 20rpx;
		border-radius: 10rpx;


	}

	.other {
		background: #fff;
		margin: 20rpx;
		border-radius: 30rpx;

		.others {
			display: flex;
			flex-direction: column;

			.line {
				width: 100%;
				height: 2rpx;
				background: #F7F7F7
			}
		}

		.others_item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;

			.icon {
				margin-left: 40rpx;
				width: 50rpx;
				height: 50rpx;
			}

			.text {
				margin-left: 30rpx;
				font-size: 26rpx;
				font-weight: bold;
			}


		}
	}

	.btn {
		height: 70rpx;
		display: flex;
		line-height: 70rpx;
		justify-content: space-between;
		box-shadow: 0 3rpx 10rpx 0rpx #d4d4d4;
		font-size: 34rpx;
		font-weight: bold;

		.save {
			margin-right: 20rpx;
			color: #87C38F;
		}

		.cancel {
			margin-left: 20rpx;
			color: #afafaf;
		}
	}

	.picker-view {
		width: 100%;
		height: 500rpx;
		margin-top: 20rpx;
	}

	.item {
		// line-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-weight: bold;
	}
</style>